<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="isLogin">
        <div >
            <input v-model="name" placeholder="请输入学生姓名"/>
            <input v-model="sex" placeholder="请输入学生性别"/>
            <input v-model="classId" type="number" placeholder="请输入学生班级ID"/>
            <button @click="insert()">插入学生信息</button>
        </div>
        <div>
            <input v-model="searchName" placeholder="请输入模糊查询学生姓名"/>
            <input v-model="age" placeholder="根据年龄查询"/>
            <button @click="getList()">查询</button>
        </div>
        <div>
            <div style="display: flex;flex-direction: row;">
                <div style="width: 100px;">ID</div>
                <div style="width: 100px;">头像</div>
                <div style="width: 100px;">姓名</div>
                <div style="width: 100px;">性别</div>
                <div style="width: 100px;">年龄</div>
                <div style="width: 100px;">民族</div>
                <div style="width: 100px;">班级ID</div>
            </div>
            <div v-for="item in list" style="display: flex;flex-direction: row;align-items: center">
                <div style="width: 100px;">{{item.id}}</div>
                <div style="width: 100px;">
                    <img :src="item.touxiang" style="width: 50px;height: 50px"
                         @click="choose(item.id)"/>
                    <input type="file" multiple accept="image/jpeg,image/png" :data-id="item.id"
                           style="visibility: hidden" :id="item.id" @change="handleChoose">
                </div>
                <input style="width: 100px;" v-model="item.name"/>
                <div style="width: 100px;">{{item.sex}}</div>
                <div style="width: 100px;">{{item.age}}</div>
                <div style="width: 100px;">{{item.classId}}</div>
                <div style="width: 100px;">{{item.minzu}}</div>
                <button @click="updates(item.id,item.name)">更新</button>
                <button @click="deletes(item.id)">删除</button>
            </div>
        </div>

    </div>
    <div v-if="!isLogin">
        <h1>欢迎访问学生管理系统</h1>
        <div v-if="!showRegist">
            <input v-model="username" placeholder="请输入用户名"/>
            <input v-model="password" placeholder="请输入密码"/>
            <button @click="login()">登录</button>
            <button @click="()=>{
                this.showRegist = true;
            }">前往注册</button>
        </div>
        <div v-if="showRegist">
            <input v-model="username1" placeholder="请输入邮箱"/>
            <button @click="getCode()" :style="{background:count==60?'gray':'white'}" >{{codeStr}}</button>
            <input v-model="code" placeholder="请输入验证码"/>
            <input v-model="password1" placeholder="请输入密码"/>
            <button @click="regist()">注册</button>
            <button @click="()=>{
                this.showRegist = false;
            }">返回登录</button>
        </div>
    </div>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            codeStr:'获取验证码',//获取验证码按钮的文字
            count:60,//验证码倒计时
            username1:'',//注册账号
            password1:'',//注册密码
            code:'',//注册验证码
            showRegist:false,//是否显示注册界面
            isLogin:true,//是否登录了
            name: '',
            sex: '',
            classId: '',
            searchName: '',
            age: '',
            list: [],
            username:'',
            password:"",
            token:""
        },
        //页面初始化调用
        mounted() {
            // localStorage.setItem("token","")
            let token = localStorage.getItem("token");
            this.token =   token==null?'':token
            this.getList() //获取所有学生信息
        },
        methods: {
            insert() {
                axios
                    //填写接口地址，参数用字符拼接起来
                    .get('http://localhost:8080/student/insertJpa?name=' + this.name + '&sex=' + this.sex + '&classId=' + this.classId,
                        {
                            headers:{"token":this.token}
                        })
                    .then(response => {
                        if(response.data=='token过期，请重新登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='token错误'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='请先登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        alert(response.data)
                        //添加完成后清空输入框
                        this.name = ''
                        this.sex = ''
                        this.classId = ''
                        //添加完成后刷新列表
                        this.getList()
                    })

            },
            //获取对应的学生信息
            getList() {
                var age = 0;

                if (this.age != "") {
                    age = this.age;
                }
                //获取学生信息
                axios
                    .get('http://localhost:8080/student/findAllJpaByName?name='
                        + this.searchName + '&age=' + age, {
                        headers:{"token":this.token}
                    })
                    .then(response => {
                        if(response.data=='token过期，请重新登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='token错误'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='请先登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        this.list = response.data
                    })
            },
            deletes(id) {
                axios
                    .get('http://localhost:8080/student/deleteJpa?id=' + id, {
                        headers:{"token":this.token}
                    })
                    .then(response => {
                        if(response.data=='token过期，请重新登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='token错误'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='请先登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        alert(response.data)
                        //删除完成后刷新列表
                        this.getList()
                    })
            },
            updates(id, newName) {
                axios
                    .get('http://localhost:8080/student/updateJpa?id=' + id + '&name=' + newName, {
                        headers:{"token":this.token}
                    })
                    .then(response => {
                        if(response.data=='token过期，请重新登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='token错误'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='请先登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        alert(response.data)
                        //更新完成后刷新列表
                        this.getList()
                    })
            },
            choose(id) {
                let input = document.getElementById(id);
                input.click()//模拟点击事件
            },
            handleChoose(e) {
                let file = e.target.files.item(0);//拿到选择的图片
                let data = new FormData();
                data.append("file", file);
                data.append("id", e.target.dataset.id)
                axios
                    .post('http://localhost:8080/student/uploadFile', data, {
                        headers:{"token":this.token}
                    })
                    .then(response => {
                        if(response.data=='token过期，请重新登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='token错误'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        if(response.data=='请先登录'){
                            alert(response.data)
                            this.isLogin = false;
                            return
                        }
                        alert(response.data)
                        //更新完成后刷新列表
                        this.getList()
                    })
            },
            //登录方法
            login(){
                let data = new FormData();
                data.append("user", this.username);
                data.append("pwd", this.password)
                axios
                    .post('http://localhost:8080/noLogin/login', data, {
                        headers:{"token":this.token}
                    })
                    .then(response => {//返回的结果
                        if(response.data==""){
                            alert("用户名和密码错误")
                        }else {
                            //调用登录接口，模拟登陆
                            this.isLogin = true;
                            localStorage.setItem("token",response.data)
                            this.token = response.data//随便给token赋值，实际开发，是的调用登陆接口之后，token是接口返回的
                            this.getList()
                        }

                    })

            },
            //获取验证码
            getCode(){
                if(this.count!=60){//如果不是60，不给点击，因为只有60的情况，才能重新点击
                    return;
                }
                axios
                    .get('http://localhost:8080/noLogin/getCode?email='+this.username1, {
                        headers:{"token":this.token}
                    })
                    .then(response => {//返回的结果
                            alert(response.data)
                        if(response.data=="邮箱错误,请输入正确邮箱"){
                            return;
                        }
                        //以下逻辑实现点击获取验证码后，每一秒钟之后显示的文字都减一秒，60秒后显示获取验证码，允许用户重新点击获取验证码按钮
                        this.count = 59;
                        this.codeStr = '请等待59秒'
                        let that = this;
                        const countDown = setInterval(() => {//计时器，每秒钟执行一次
                            if (that.count == 0) {
                                that.count = 60,
                                    that.codeStr = '获取验证码'
                                clearInterval(countDown);//停止计时器
                                return;
                            }
                            that.count--;
                            that.count = that.count,
                                that.codeStr = that.count < 10 ? `请等待0${that.count}s` : `请等待${that.count}s`
                        }, 1000);//1000表示每秒钟执行一次
                    })
            },
            //注册方法
            regist(){

                axios
                    .get('http://localhost:8080/noLogin/register?user='+this.username1+"&pwd="+this.password1+"&code="+this.code, {
                        headers:{"token":this.token}
                    })
                    .then(response => {//返回的结果
                        alert(response.data)
                        if(response.data=="验证码错误"){
                            return;
                        }
                        if(response.data=="请输入邮箱"){
                            return;
                        }
                        if(response.data=="请输入密码"){
                            return;
                        }
                        if(response.data=="请输入验证码"){
                            return;
                        }
                        if(response.data=="该用户名已注册"){
                            return;
                        }

                        this.showRegist = false
                    })
            }
        }
    })
</script>
</body>
</html>
